<!--  -->
<template>
  <div>
    <div class="operation-group">
      <el-form
        :inline="true"
        :model="searchVo"
        class="demo-form-inline"
        style="margin: 10px; float: right"
      >
        <el-form-item label="标题">
          <el-input v-model="searchVo.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input v-model="searchVo.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchVo.publishDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="warning" @click="addNotice">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="noticeList" style="width: 100%">
      <el-table-column
        type="index"
        width="75"
        align="center"
        header-align="center"
        label="序号"
      >
        <template slot-scope="scope">
          <div v-if="scope.$index + 1 == 1" class="first">1</div>
          <div v-if="scope.$index + 1 == 2" class="second">2</div>
          <div v-if="scope.$index + 1 == 3" class="third">3</div>
          <div
            v-if="
              scope.$index + 1 != 1 &&
              scope.$index + 1 != 2 &&
              scope.$index + 1 != 3
            "
          >
            {{ scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="标题"
        align="center"
        header-align="center"
        width="250"
      >
        <template slot-scope="scope">
          <div class="title">{{ scope.row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="摘要"
        align="center"
        header-align="center"
        width="500"
      >
        <template slot-scope="scope">
          <div class="summary">{{ scope.row.summary }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="publishDate"
        label="日期"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-search"
            circle
            @click="dispatchToPath('/home/notice/detail/' + scope.row.noticeId)"
          ></el-button
          ><el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-region"
      :current-page="currentPage"
      :total="totalRecords"
      :page-size="limit"
      :page-sizes="[4, 7, 12, 16, 20, 24, 28]"
      style="margin: 30px 0; text-align: center"
      layout="sizes,prev,pager,next,jumper,->,total,slot"
      @current-change="changeCurrentPage"
      @size-change="changeSize"
    />
    <!-- 与上面区分，下面代码是添加通知时需要弹出的弹出框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeList: [
        {
          noticeId: 1,
          title: "关于清明节放假的通知",
          summary: "清明节即将来临，员工们准备放假吧！",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
        {
          title:
            "慧博云通爱心助力“我参与 • 我体验”2023年圆梦幸福跑，喜迎亚残运会倒计时200天+",
          summary:
            "2023年4月3日上午，在杭州亚残运会倒计时200天来临之际，由杭州市残疾人联合会、滨江区人民政府共同举办的“我参与·我体验”残健携手喜迎亚残运倒计时200天+毅行暨2023年圆梦幸福跑活动在奥体中心体育场西广场举行。慧博云通科技股份有限公司荣获“爱心企业”并参与此次活动，为公益事业再献爱心。",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
        {
          title:
            "慧博云通荣获钱开区“突出贡献奖”，董事长余浩受邀参加誓师大会并发言",
          summary:
            "2023年2月11日上午，杭州钱江经济开发区召开“勇担新使命 助力新中心”争创国家级经济技术开发区誓师大会，以争创国家级经济技术开发区为目标，全面部署各项工作。慧博云通科技股份有限公司荣获钱开区“突出贡献奖”，董事长余浩受邀参加誓师大会并发言。",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
        {
          title:
            "余杭区举行“强信心、拼经济”高质量发展大会 慧博云通荣获“数字经济创新发展企业”10强",
          summary:
            "2023年2月8日下午，余杭区“强信心、拼经济”高质量发展大会在未来科技城学术交流中心举行。区委副书记、区长王牮主持，区领导阮文静、沈昱、王姝、朱红丹等，区内各大院校、科研院所、重点企业和创新创业人才代表以及有关部门、镇街、平台、金融机构负责人等超1000人在主会场参加，线上共有25万余人次通过视频直播系统参会。",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
        {
          title: "提前布局离岸研发，全球化业务更具竞争力",
          summary:
            "离岸研发中心（ODC）是目前软件行业较受青睐的合作模式，可帮助公司提高生产效率并减少运营开支。慧博云通早在十余年前就开始实践与布局。为实现境内外市场同步发展的目标，慧博云通先后在中国为众多世界500强客户建立离岸研发中心，提供产品开发、测试以及技术支持等服务，SAP是其中一个典型客户。",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
        {
          title: "慧博云通荣登浙江省电子信息产业百家重点企业名单",
          summary:
            "日前，浙江省经济和信息化厅发布2022年浙江省电子信息产业百家重点企业名单，慧博云通科技股份有限公司荣登2022年浙江省软件业务收入前30榜单。",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
        {
          title: "2023新年致辞——永葆创业激情 再谱发展新篇",
          summary:
            "2023年正在向我们走来。在新的一年来临之际，我谨代表慧博云通公司向大家致以最美好的新年祝福！祝大家在新的一年里身体健康、工作顺利、家庭和睦、幸福安康！",
          content: "",
          publishDate: "2023-4-1 15:30",
        },
      ],
      currentPage: 1,
      totalRecords: 15,
      limit: 7,
      searchVo: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      noticeAddVisible: false,
    };
  },
  created() {},

  mounted() {},

  methods: {
    dispatchToPath(path) {
      this.$router.push({
        path: path,
      });
    },
    addNotice() {
      this.$router.push({
        name: "addnotice",
      });
    },
  },
};
</script>
<style scoped>
.operation-group {
  height: 65px;
  margin: 10px 0;
  border-radius: 15px;
  background: white;
  position: relative;
  display: flex;
}

.first {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(69, 170, 242),
    rgb(75, 123, 236)
  );
}
.second {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(254, 211, 48),
    rgb(253, 150, 68)
  );
}
.third {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(38, 222, 129),
    rgb(32, 191, 107)
  );
}

.title {
  width: 225px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*内容限制的行数 需要几行写几就行*/
}

.summary {
  width: 475px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*内容限制的行数 需要几行写几就行*/
}
</style>
